{% extends "layout.html" %}
{% block content %}
<style>
  .control-item {
    display: inline-block;
    height: 45px;
    min-width: 100px;
    padding: 0 20px;
    line-height: 45px;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    text-align: center;
  }
  .control-item.active {
    color: #20a53a;
    background: #20a53a10;
  }
  .daily-thumbnail{
    width: 1200px;
    margin: 80px auto;
  }
  .thumbnail-box{
    position: relative;
    display: flex;
    justify-content: center;
  }

  .thumbnail-introduce{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
  }
  .thumbnail-introduce span{
    font-size: 20px;
    font-weight: bold;
  }
  .thumbnail-introduce ul {
    display: flex;
    font-size: 16px;
    line-height: 30px;
    margin: 20px 0;
    list-style-type: square;
  }
  .thumbnail-introduce ul li + li {
      margin-left: 40px;
  }
  .pluginTipsGg{
    position: relative;
    width: 950px;
    height: 720px;
    background-color: #f1f1f1;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
    border-radius: 4px;
  }
  /*.pluginTipsGg:hover::before{*/
  /*  display: inline-block;*/
  /*}*/
  .pluginTipsGg::before {
    content: '点击预览';
    display: none;
    background: #000;
    opacity: 0.2;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 621px;
    font-size: 18px;
    vertical-align: bottom;
    text-align: center;
    border-radius: 4px;
    transition: all 1s;
  }
  .tab-list .tabs-item.active:after {
    content: '';
    width: 20px;
    height: 2px;
    position: absolute;
    left: 50%;
    bottom: 0px;
    background: red;
    margin-left: -10px;
    background: #20a53a;
  }
  .thumbnail-box .thumbnail-tab {
    margin-right: 20px;
    width: 120px;
    border-left: 1px solid #def2e2;
  }
  .thumbnail-tab li {
    padding: 0 20px;
    line-height: 36px;
    cursor: pointer;
    font-size: 14px;
  }
  .thumbnail-tab li.on {
    border-left: 2px solid #20a53a;
    color: #20a53a;
    font-size: 16px;
    font-weight: bold;
  }
  .thumbnail-item {
    display: none;
  }
  .thumbnail-item.show {
    display: block;
  }
</style>
<div class="main-content pb55" style="min-height: 525px;">
  <div class="container-fluid">
    {% if 'error_msg' in data %}
      <div class="pos-box bgw mtb15">
        <div class="control-nav">
          <div class="control-item active" name="control">防火墙</div>
        </div>
      </div>
      <div class="mtb15 pd15 bgw daily-view">
        <div class="info-title-tips">
          <p><span class="glyphicon glyphicon-alert" style="color: #f39c12; margin-right: 10px;"></span>提示：此页面可在面板设置中关闭</p>
        </div>
        <div class="daily-thumbnail">
          <div class="thumbnail-introduce">
            <span>Nginx防火墙功能介绍</span>
            <ul>
              <li>仅支持Nginx</li>
              <li>抵御CC攻击</li>
              <li>关键词拦截</li>
              <li>拦截恶意扫描</li>
              <li>阻止黑客入侵</li>
            </ul>
            <div class="daily-product-buy">
              <a class="btn btn-default mr10" title="产品预览" href="https://www.bt.cn/new/product_nginx_firewall.html" target="_blank">产品预览</a>
              <a title="购买专业/企业版" href="javascript:;" class="btn btn-success va0 ml15 payPlugin">立即购买</a>
            </div>
          </div>
          <div class="thumbnail-box">
            <ul class="thumbnail-tab">
              <li class="on">概览</li>
              <li>攻击地图</li>
              <li>攻击报表</li>
              <li>全局设置</li>
              <li>站点设置</li>
              <li>封锁记录</li>
              <li>操作日志</li>
            </ul>
            <div class="thumbnail-item show">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/1.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/2.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/3.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/4.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/5.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/6.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/7.png);"></div>
            </div>
          </div>
        </div>
      </div>
    {% else %}
      <div class="pos-box bgw mtb15">
        <div class="control-nav">
          <div class="control-item active" name="control">防火墙</div>
        </div>
      </div>
      <div class="mtb15 pd15 bgw daily-view">
        <div class="info-title-tips">
          <p><span class="glyphicon glyphicon-alert" style="color: #f39c12; margin-right: 10px;"></span>提示：此页面可在面板设置中关闭</p>
        </div>
        <div class="daily-thumbnail">
          <div class="thumbnail-introduce">
            <span>Nginx防火墙功能介绍</span>
            <ul>
              <li>仅支持Nginx</li>
              <li>抵御CC攻击</li>
              <li>关键词拦截</li>
              <li>拦截恶意扫描</li>
              <li>阻止黑客入侵</li>
            </ul>
            <div class="daily-product-buy">
              <a class="btn btn-default mr10" title="产品预览" href="https://www.bt.cn/new/product_nginx_firewall.html" target="_blank">产品预览</a>
              <a title="购买专业/企业版" href="javascript:;" class="btn btn-success va0 ml15 payPlugin">立即购买</a>
            </div>
          </div>
          <div class="thumbnail-box">
            <ul class="thumbnail-tab">
              <li class="on">概览</li>
              <li>攻击地图</li>
              <li>攻击报表</li>
              <li>全局设置</li>
              <li>站点设置</li>
              <li>封锁记录</li>
              <li>操作日志</li>
            </ul>
            <div class="thumbnail-item show">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/1.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/2.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/3.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/4.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/5.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/6.png);"></div>
            </div>
            <div class="thumbnail-item">
                <div class="pluginTipsGg" style="background-image: url(/static/img/nginx_firewall/7.png);"></div>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}
{% block scripts %}
  <script type="text/javascript">
    $('.installWaf').on('click',function(){
      bt.soft.install('btwaf')
    })
    $('.payPlugin').on('click',function(){
      bt.soft.get_soft_find('btwaf',function(rdata){
        bt.soft.product_pay_view({"name":rdata.title,"pid":rdata.pid,"type":rdata.type,"plugin":true,"ps":rdata.ps, 'totalNum': 25});
        setTimeout(function(){
          $('.lib_ltd').click();
        },500);
      });
    })
    $('.thumbnail-tab li').click(function () {
      var index = $(this).index();
      $(this).addClass('on').siblings('.on').removeClass('on');
      $('.thumbnail-item').eq(index).addClass('show').siblings('.show').removeClass('show');
    })
    // $('.thumbnail-box').on('click',function(){
    //   layer.open({
    //     title:false,
    //     btn:false,
    //     shadeClose:true,
    //     closeBtn: 2,
    //     area:['950px','725px'],
    //     content:'<div class="pd10"><img src="/static/img/btwaf-nginx.png" style="width:100%"/></div>'
    //   })
    // })
  </script>
{% endblock %}